<template>
  <div class="loginFormBox">
    <div class="loginFormBox2">
      <h2>手机号登入</h2>
      <!-- El表单————开始 -->
      <el-form
        class="loginFrom"
        ref="ruleFormRef"
        :model="logindata"
        :rules="rules"
      >
        <el-form-item prop="phonenumber">
          <el-input
            v-model="logindata.phonenumber"
            placeholder="请输入电话号码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="logindata.password"
            placeholder="请输入密码"
            type="password"
          ></el-input>
        </el-form-item>

        <!-- 提交按钮 -->
        <el-form-item>
          <el-button
            type="primary"
            class="btnSubmit btnpoint"
            @click="submitForm('ruleFormRef')"
            >立即登入</el-button
          >
        </el-form-item>
      </el-form>
      <!-- El表单————结束 -->

      <!-- 找回密码 开始 -->

      <div class="tiparea">
        <p>
          <a class="btnforget btn" @click.prevent="">忘记密码？</a>
          <a class="btnregister btn" @click.prevent="toregister">去注册</a>
        </p>
      </div>

      <!-- 找回密码 介绍 -->
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { getCurrentInstance } from "vue";
import { useStore } from "vuex";
import { computed } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    // 取vuex里面的值
    const vuexdata = useStore();
    const trance = computed(() => {
      return vuexdata.state.trance;
    });

    //弹窗

    const upMessage = (type, message) => {
      ElMessage({
        showClose: true,
        message: message,
        type: type,
      });
    };
    //用户输入的数据
    const logindata = reactive({
      phonenumber: "",
      password: "",
    });

    //数据的校验
    const rules = reactive({
      phonenumber: [
        {
          message: "手机号不能为空",
          required: "true",
          trigger: "blur",
        },
        {
          min: 11,
          max: 11,
          message: "请输入11位手机号",
        },
      ],
      password: [
        {
          message: "密码不能为空",
          required: "true",
          trigger: "blur",
        },
        {
          min: 6,
          message: "密码需要六位数以上",
        },
      ],
    });
    const { proxy } = getCurrentInstance();
    //点击提交以后 再校验一次
    const submitForm = (formEl) => {
      if (!proxy.$refs[formEl]) return;
      proxy.$refs[formEl].validate((valid) => {
        if (valid) {
          //通过校验
          proxy
            .$axios2({
              url: "/api/user/login",
              method: "post",
              headers: {
                "Content-Type": "application/json",
              },
              data: {
                phone: logindata.phonenumber,
                password: logindata.password,
              },
            })
            .then((res) => {
              console.log(res.data);
              if (res.data.errorMsg == "用户密码不正确") {
                //如果用户不存在 就弹出窗口
                upMessage("warning", "用户密码不正确.");
              } else if (res.data.errorMsg == "用户不存在") {
                upMessage("warning", "用户不存在.");
              }
              if (res.data.msg == "登录成功") {
                upMessage("success", "登入成功");
                console.log(res.data.token);
                localStorage.setItem("elementToken", "Bearer" + res.data.token); //将token、用户资料放入本地
                localStorage.setItem("username", res.data.user.username);
                localStorage.setItem("userid", res.data.user.userid);
                localStorage.setItem("userphone", res.data.user.userphone);
                
                //登入成功 跳转
                router.push("/");
              }
            });
        } else {
          console.log("校验不通过");
          return false;
        }
      });
    };
    //点击去注册
    const toregister = () => {
      vuexdata.commit("tranceMethod", true);
    };
    return { logindata, rules, submitForm, toregister };
  },
};
</script>

<style>
.loginFormBox {
  /* background-image: url("../assets/Wecome.png"); */
  display: flex;
  justify-items: center;
  align-content: center;
  width: 500px;
  height: 500px;
  margin: 0 auto;

  /* 阴影 */
  /* -webkit-box-shadow: 1px 1px 3.5px 5px #ddd;
  -moz-box-shadow: 1px 1px 3.5px 5px #ddd;
  box-shadow: 1px 1px 3.5px 5px #ddd; */
}

.loginFormBox2 {
  display: flex;
  flex-direction: column;
  width: 75%;
  height: 75%;
  margin: 0 auto;
  margin-top: 10%;

  /* 玻璃样式 */
  background: #c4dae3;
}

h2 {
  font-size: 30px;
  margin-top: 30px;
}
/* 输入框边距 */
.loginFrom {
  padding: 60px 60px 30px 60px;
}
.btnSubmit {
  width: 100%;
}
/* 注册按钮 */
.btnregister {
  float: right;
  margin-right: 60px;
}
.btn {
  cursor: pointer;
}
.btn:hover {
  color: #028f88;
}
/* 忘记密码按钮 */
.btnforget {
  float: left;
  margin-left: 60px;
}
/**立即登入按钮 */
.btnpoint:hover {
  border: #fdc23e;
  background: #fdc23e;
  color: black;
}
</style>